<template>
  <div>
	  <Navigation></Navigation>
    <!-- 大图 -->
    <div class="bigimgbox">
      <img src="./img/aircraft/aircraft.jpg" alt="" />
    </div>

    <!-- 图片广告 -->
    <div class="tpbox">
      <div class="tp">
        <i>01</i>
        <div class="tpcontent">
          <div class="tpcontent1">公司自有车辆</div>
          <hr />
          <div class="tpcontent2">车辆全部来自蓉之风</div>
          <hr />
          <div class="tpcontent3">
            <div>自营蓉之风租车</div>
            <div>车辆大部份为新车</div>
            <div>车况良好</div>
          </div>
        </div>
        <img src="./img/aircraft/q-sPickup1.jpg" alt="" />
      </div>
      <div class="tp" style="background-color: black">
        <i>02</i>
        <div class="tpcontent">
          <div class="tpcontent1">专业司机</div>
          <hr />
          <div class="tpcontent2">全部为全职司机</div>
          <hr />
          <div class="tpcontent3">
            <div>司机驾龄均在10年以上</div>
            <div>着正装，仪容好</div>
            <div>无犯罪记录，无不良记录</div>
          </div>
        </div>
        <img src="./img/aircraft/q-sPickup2.jpg" alt="" />
      </div>
      <div class="tp" style="background-color: black">
        <i>03</i>
        <div class="tpcontent">
          <div class="tpcontent1">优质服务</div>
          <hr />
          <div class="tpcontent2">准时、准点、技术过硬</div>
          <hr />
          <div class="tpcontent3">
            <div>对道路了如指掌</div>
            <div>7*10小时售后服务</div>
            <div>配矿泉水，配纸巾</div>
          </div>
        </div>
        <img src="./img/aircraft/q-sPickup3.jpg" alt="" />
      </div>
      <div class="tp">
        <i>04</i>
        <div class="tpcontent">
          <div class="tpcontent1">品质保障</div>
          <hr />
          <div class="tpcontent2">9年品质沉淀</div>
          <hr />
          <div class="tpcontent3">
            <div>9年沉淀</div>
            <div>覆盖全川的服务网点</div>
            <div>完善的售后流程</div>
          </div>
        </div>
        <img src="./img/aircraft/q-sPickup4.jpg" alt="" />
      </div>
    </div>

    <div class="cartype">
      <div>推荐车型</div>
      <div class="cartype2">严选海量好车，只为给你更好的服务</div>
    </div>
   <div class="carlists">
     <div class="carlist" v-for="el in arr1">
       <router-link :to="{path:'/yj/detail',query:{'id':el.carid}}">
         <img :src="el.img[0]" alt="" />
      </router-link>
       <div class="type1">{{el.carname}}</div>
       <div class="type2">{{el.shift}}&nbsp;|&nbsp;乘坐{{el.peopel}}人</div>
       <div class="type3">￥<span>{{el.price}}</span>元起</div>
     </div>
   </div>
	
			<Liucheng></Liucheng>
			<Footer1></Footer1>
  </div>
</template>

<script setup>
import {ref,
		reactive,
		onBeforeMount,
		getCurrentInstance,
 
	} from "vue"


// 后端数据

 
	let arr1=reactive([]) //和vue2一样，请求数据时需要提前用一个空数组装
 
	const {proxy} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
  
  	 onBeforeMount( async()=>{
  	 	let res=await proxy.$axios('/jiejicar') //使用公共配置的$axios进行axios请求
  	 	//因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
  	 	//此时会进行代理 转变为http://127.0.0.1:7001/test
  	 	 arr1.push(...res.data) //将请求的数据添加到外部的arr1中
		 // console.log(arr1,6666)	
		 
		 //处理图片路径问题
		 let VehicleCarArry=[]
		 let aa=[]
		 let bb=[]
		arr1.forEach((el,index)=>{
				VehicleCarArry[index]=el.VehicleCar.split("---")
				aa[index]=VehicleCarArry[index].join('http://localhost:7001')
				bb[index]=aa[index].split(",")
			    el.img=bb[index]

		})
		// arr1.push
			// console.log(VehicleCarArry,1111,aa,222,bb)
			// console.log(arr1[0].img,6666)
  	 })
  
</script>

<style lang="scss" scoped>
//大图
.bigimgbox {
  width: 100%;
  text-align: center;
  overflow: hidden;
  img {
    margin: auto -100%;
    vertical-align: middle;
  }
}
//图片广告
.tpbox {
  cursor: default;
  width: 1020px;
  // height: 600px;
  margin: 20px auto;
  // background-color: lightpink;
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;

  .tp {
    width: 510px;
    height: 280px;
    background-color: #c6212e;
    position: relative;
    i {
      color: white;
      font-size: 40px;
    }
    .tpcontent {
      width: 130px;
      line-height: 40px;
      // text-align: center;
      margin-left: 50px;
      color: white;
      // background-color: antiquewhite;
      .tpcontent1 {
        font-size: 20px;
        font-weight: 700;
      }
      .tpcontent2 {
        font-size: 14px;
      }
      .tpcontent3 {
        font-size: 12px;
        line-height: 20px;
      }
    }
    img {
      width: 300px;
      height: 280px;
      position: absolute;
      top: 0;
      left: 210px;
    }
  }
}
//车表描述
.cartype {
  cursor: default;
  width: 1300px;
  // height: 30px;
  text-align: center;
  font-size: 40px;
  background-color: #fafafa;
  // color: #3ac257;
  margin: 0 auto;
  line-height: 45px;
  .cartype2 {
    font-size: 14px;
    color: #a5a59d;
  }
}
//车表
.carlists {
  background-color: #fafafa;
  cursor: default;
  width: 1300px;
  // height: 2000px;
  margin: 0 auto;
  // background-color: #3ac257;
  flex-wrap: wrap;
  display: flex;
  // justify-content: space-between;

  .carlist:hover {
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); /* 鼠标悬浮时盒子出现的阴影 */
    transform: translate(0, -5px); /* 鼠标悬浮时盒子上移10px */
  }
  //单个车box
  .carlist {
    width: 378px;
    // background-color: aliceblue;
    margin-bottom: 20px;
    position: relative;
	margin-left: 40px;
    border: 1px solid #d5d2d2;
    transition: all 0.3s; /* 上浮这个过程需要的时间 */
    a {
      //车img
      img {
        cursor: pointer;
        width: 378px;
        height: 258px;
      }
    } //车辆型号
    .type1 {
      margin-left: 10px;
      margin: 5px;
      font-size: 18px;
    }
    .type2 {
      margin-left: 10px;
      font-size: 14px;
    }
 .type3 {
 	width:130px;
   position: absolute;
   top: 280px;
   left: 260px;
   span {
     color: #ff3e1d;
     font-size: 24px;
   }
 }
  }
}
</style>
